<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                    <el-breadcrumb-item>代理资金明细</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <template #header>
                    <div style="display: flex; align-items: center;">
                        <el-input style="width: 260px;" v-model="inputval" placeholder="请输入UID或用户名" />
                        <div style="padding: 5px;"></div>
                        <el-button type="primary" :icon="Search" @click="inputSearch()">搜索</el-button>
                    </div>
                </template>

                <!-- 列表 -->
                <el-table :data="tableData.list" :border="true" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="100" />
                    <el-table-column prop="order_id" label="订单ID" width="230" />
                    <el-table-column prop="agent_uid" label="代理UID" />
                    <el-table-column label="代理用户名">
                        <template #default="scope">
                            <el-tag >{{ scope.row.agent_name }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="user_uid" label="下级UID" />
                    <el-table-column prop="user_name" label="下级用户名" />
                    
                    <el-table-column label="订单金额">
                        <template #default="scope">
                            <el-tag type="danger">{{ scope.row.order_money }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="佣金费率">
                        <template #default="scope">
                            <el-tag type="danger">{{ scope.row.agent_rate }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="佣金金额">
                        <template #default="scope">
                            <el-tag type="danger">{{ scope.row.agent_money }}</el-tag>
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="游戏名称">
                        <template #default="scope">
                            <el-tag >{{ scope.row.game_name }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="create_time" label="订单时间" width="200"/>

                </el-table>
                <!-- 分页 -->

                <div style="padding: 10px;"></div>
                <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                    :page-sizes="[20, 50]" :small="small" :background="background" layout="total, prev, pager, next, jumper"
                    :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            </el-card>
        </el-col>
    </el-row>
</template>

<script setup>

import { ref, reactive, onMounted } from 'vue'
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, UserFilled, Search } from '@element-plus/icons-vue'


const tableData = reactive({ list: [] })

onMounted(() => {
    admin_agent_index()
})


// 搜索 
const inputval = ref('')
function inputSearch(){
     if(inputval.value == ''){
        return error('请输入UID或用户名')
     }
     page.uid = inputval.value
     admin_agent_index()
}

// 获取用户列表
function admin_agent_index() {
    
    request_post('/admin_agent_money_log', page).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
            tableData.list = res.data.data.data
            page.total = res.data.data.total
        } else {
            return error(res.data.msg)
        }
    })

}

const page = reactive({
    uid:'',
    pagenum: 1,
    pagesize: 20,
    total: 0
})

function handleSizeChange(val) {
    page.pagenum = val
    admin_agent_index()
}
function handleCurrentChange(val) {
    page.pagenum = val
    admin_agent_index()
}


</script>

<style></style>
